<template>
  <div class="upload_img_list">

    <template v-for="(item, index) in fileList" :key="index">
      <img :src="item.url" alt="" class="upload-img" />
    </template>

    <el-upload
      class=""
      action="#"
      name=""
      :on-change="handleChange"
      v-if="fileList.length < 3"
    >
      <el-icon class="upload_box"><Plus /></el-icon>
      
    </el-upload>

    
    

  </div>
</template>

<script setup>

import { ref, reactive, watch } from 'vue';
import { Plus } from '@element-plus/icons-vue';
const fileList = reactive([]);

watch(fileList, (newVal, oldVal) => {
  console.log('更新了fileList====>', newVal);
},{ immediate: true, deep: true })

const handleChange = (file) => {
  if(file && file.raw) {
    const reader = new FileReader();
    reader.onload = (e) => {
      const exists = fileList.some(so => so.url === e.target.result);
      if(!exists) {
        fileList.push({url: e.target.result});
      }
    }
    reader.readAsDataURL(file.raw);
  }
}

</script>

<style scoped lang="less">

.re { position: relative; }

.upload_img_list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-top: -15px;
  .el-icon.upload_box {
    position: relative;
    width: 148px;
    height: 148px;
    background: #f5f7fa;
    border: 1px dashed #ccc;
    border-radius: 4px;
    margin-top: 15px;
    margin-left: 15px;
  
    &:hover {
      border-color: aquamarine;
    }
  }
  .upload-img {
    width: 148px;
    height: 148px;
    margin-top: 15px;
    margin-left: 15px;
    border-radius: 4px;
    object-fit: cover;
  }
}

.upload_demo {
  
  
}



</style>